<style>
    #mainInfo tr>td {
        max-width: 130px;
        word-wrap: break-word;
    }

    #ramInfo tr>td , #networkInfo tr>td {
        word-wrap: break-word;
        max-width: 300px;
    }

    #networkInfo tr>td:nth-child(1), #ramInfo tr>td:nth-child(1){
        width: 50px;
    }

    #networkInfo tr>td:last-child, #ramInfo tr>td:last-child {
         width: 100px;
    }

    #networkInfo tr>td>select {
        height: 27px;
    }

    .bootbox.modal {
        z-index: 10000;
    }

    #addNetworkForm div>.form-control, #addRamForm div>.form-control{
        width: 90%;
    }
</style>
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">资产信息</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <tr>
                        <th>资产类型</th>
                        <th>资产编号/资产名称</th>
                    </tr>
                    <tr>
                        <td>{{ asset.get_asset_type_display }}</td>
                        <td>{{ asset.asset_nu }}</td>
                    </tr>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <form id="mainForm">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title" onclick="assetInfoEdit();">主体信息</h3>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover" id="mainInfo">
                        <tr><th>服务器类型</th>
                            {% if asset.serverassets.server_type == 1 %}
                                <th>宿主机</th>
                            {% endif %}
                            <th>主机名称</th>
                            <th>CPU型号</th>
                            <th>物理CPU数</th>
                            <th>逻辑CPU数</th>
                            <th>磁盘空间</th>
                            <th>内存容量</th>
                            <th>内核版本</th>
                            <th>操作系统</th>
                        </tr>
                        <tr>
                            <td>{{ asset.serverassets.get_server_type_display }}</td>
                            {% if asset.serverassets.server_type == 1 %}
                                <td>{{ asset.serverassets.hosted_on.assets.asset_management_ip.IP }}</td>
                            {% endif %}
                            <td><span>{{ asset.serverassets.hostname|default:'' }}</span><a id="hostname" class="hostname" name="hostname" data-length="100" data-value="{{ asset.serverassets.hostname|default:'' }}" data-pk="{{ asset.serverassets.id }}" data-type="textarea" data-title="主机名称"><i class="fa fa-edit"></i></a></td>
                            <td><span>{{ asset.serverassets.cpu_model|default:'' }}</span><a id="cpu_model" class="cpu_model" name="cpu_model" data-length="100" data-value="{{ asset.serverassets.cpu_model|default:'' }}" data-pk="{{ asset.serverassets.id }}" data-type="textarea" data-title="CPU型号"><i class="fa fa-edit"></i></a></td>
                            <td><span>{{ asset.serverassets.cpu_number|default:'' }}</span><a id="cpu_number" class="cpu_number" name="cpu_number" data-value="{{ asset.serverassets.cpu_number|default:'' }}" data-pk="{{ asset.serverassets.id }}" data-type="number" data-min="1" data-max="9999" data-title="物理CPU数"><i class="fa fa-edit"></i></a></td>
                            <td><span>{{ asset.serverassets.vcpu_number|default:'' }}</span><a id="vcpu_number" class="vcpu_number" name="vcpu_number" data-value="{{ asset.serverassets.vcpu_number|default:'' }}" data-pk="{{ asset.serverassets.id }}" data-type="number" data-min="1" data-max="9999" data-title="逻辑CPU数"><i class="fa fa-edit"></i></a></td>
                            <td><a id="disk_total" class="disk_total" name="disk_total" data-length="10" data-pk="{{ asset.serverassets.id }}" data-value="{{ asset.serverassets.disk_total|default:'' }}" data-type="text" data-title="磁盘空间">{{ asset.serverassets.disk_total|default:'' }}</a>&nbsp;GB</td>
                            <td><a id="ram_total" class="ram_total" name="ram_total" data-pk="{{ asset.serverassets.id }}" data-value="{{ asset.serverassets.ram_total|default:'' }}" data-type="number" data-min="1" data-max="9999" data-title="内存容量">{{ asset.serverassets.ram_total|default:'' }}</a>&nbsp;GB</td>
                            <td><span>{{ asset.serverassets.kernel|default:'' }}</span><a id="kernel" class="kernel" name="kernell" data-length="100" data-value="{{ asset.serverassets.kernel|default:'' }}" data-pk="{{ asset.serverassets.id }}" data-type="text" data-title="内核版本"><i class="fa fa-edit"></i></a></td>
                            <td><span>{{ asset.serverassets.system|default:'' }}</span><a id="system" class="system" name="system" data-length="100" data-value="{{ asset.serverassets.system|default:'' }}" data-pk="{{ asset.serverassets.id }}" data-type="textarea" data-title="操作系统"><i class="fa fa-edit"></i></a></td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </div>
</div>
{% if perms.assets.change_networkcardassets %}
<div class="row">
    <div class="col-xs-12">
        <form id="networkForm">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">网卡信息</h3>
                    {% if perms.assets.add_networkcardassets %}
                    <div style="float: right;"><button type="button" class="btn btn-xs" onclick="addNetwork({{ asset.id }});"><i class="glyphicon glyphicon-plus"></i></button></div>
                    {% endif %}
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover" id="networkInfo">
                        <tr>
                            <th></th>
                            <th>网卡名称</th>
                            <th>MAC地址</th>
                            <th>IP地址</th>
                            <th>网卡类型</th>
                            <th>MTU</th>
                            <th>网卡状态</th>
                        </tr>
                        {% for nk in asset.network_card_assets.all %}
                            <tr>
                                <td><button type="button" class="btn btn-xs" onclick="removeNetworkRow({{ nk.id }},this);"><i class="glyphicon glyphicon-minus"></i></button></td>
                                <td><span>{{ nk.network_card_name|default:'' }}</span><a id="network_card_name{{ nk.id }}" class="network_card_name" name="network_card_name" data-length="20"  data-value="{{ nk.network_card_name|default:'' }}" data-pk="{{ nk.id }}" data-type="text" data-title="网卡名称"><i class="fa fa-edit"></i></a></td>
                                <td><span>{{ nk.network_card_mac|default:'' }}</span><a id="network_card_mac{{ nk.id }}" class="network_card_mac" name="network_card_mac" data-length="64"  data-value="{{ nk.network_card_mac|default:'' }}" data-pk="{{ nk.id }}" data-type="textarea" data-title="MAC地址"><i class="fa fa-edit"></i></a></td>
                                <td><span>{{ nk.network_card_ip|default:'' }}</span><a id="network_card_ip{{ nk.id }}" class="network_card_ip" name="network_card_ip" data-length="16"  data-value="{{ nk.network_card_ip|default:'' }}" data-pk="{{ nk.id }}" data-type="text" data-title="IP地址"><i class="fa fa-edit"></i></a></td>
                                <td><span>{{ nk.network_card_model|default:'' }}</span><a id="network_card_model{{ nk.id }}" class="network_card_model" name="network_card_model"  data-value="{{ nk.network_card_model|default:'' }}" data-length="50" data-pk="{{ nk.id }}" data-type="textarea" data-title="网卡类型"><i class="fa fa-edit"></i></a></td>
                                <td><span>{{ nk.network_card_mtu|default:'' }}</span><a id="network_card_mtu{{ nk.id }}" class="network_card_mtu" name="network_card_mtu"  data-value="{{ nk.network_card_mtu|default:'' }}" data-length="50" data-pk="{{ nk.id }}" data-type="textarea" data-title="MTU"><i class="fa fa-edit"></i></a></td>
                                <td>
                                    <span>{% if nk.network_card_status == 1 %}正常{% else %}不正常{% endif %}</span>
                                    <a id="network_card_status{{ nk.id }}" class="network_card_status" name="network_card_status"  data-value="{{ nk.network_card_status }}" data-pk="{{ nk.id }}" data-type="select" data-title="网卡状态"><i class="fa fa-edit"></i></a>
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
        </form>

        <!-- /.box -->
    </div>
</div>
{% endif %}
{% if perms.assets.change_ramassets %}
{% if asset.serverassets.get_server_type_display != '云主机' %}
    <div class="row">
        <div class="col-xs-12">
            <form id="ramForm">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">内存信息</h3>
                        {% if perms.assets.add_ramassets %}
                        <div style="float: right;"><button type="button" class="btn btn-xs" onclick="addRam({{ asset.id }});"><i class="glyphicon glyphicon-plus"></i></button></div>
                        {% endif %}
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover" id="ramInfo">
                            <tr>
                                <th></th>
                                <th>内存序列号</th>
                                <th>内存容量</th>
                                <th>内存生产商</th>
                                <th>内存插槽</th>
                            </tr>
                            {% for ram in asset.ram_assets.all %}
                                <tr>
                                    <td><button type="button" class="btn btn-xs" onclick="removeRamRow({{ ram.id }},this);"><i class="glyphicon glyphicon-minus"></i></button></td>
                                    <td><span>{{ ram.ram_serial|default:'' }}</span><a id="ram_serial{{ ram.id }}" class="ram_serial" data-value="{{ ram.ram_serial|default:'' }}" name="ram_serial" data-length="100" data-pk="{{ ram.id }}" data-type="textarea" data-title="内存序列号"><i class="fa fa-edit"></i></a></td>
                                    <td><span>{{ ram.ram_volume|default:'' }}</span><a id="ram_volume{{ ram.id }}" class="ram_volume" data-value="{{ ram.ram_volume|default:'' }}" name="ram_volume" data-length="100" data-pk="{{ ram.id }}" data-type="textarea" data-title="内存容量"><i class="fa fa-edit"></i></a></td>
                                    <td><span>{{ ram.ram_brand|default:'' }}</span><a id="ram_brand{{ ram.id }}" class="ram_brand" data-value="{{ ram.ram_brand|default:'' }}" name="ram_brand" data-length="100" data-pk="{{ ram.id }}" data-type="textarea" data-title="内存生产商"><i class="fa fa-edit"></i></a></td>
                                    <td><span>{{ ram.ram_slot|default:'' }}</span><a id="ram_slot{{ ram.id }}" class="ram_slot" data-value="{{ ram.ram_slot|default:'' }}" name="ram_slot" data-pk="{{ ram.id }}" data-type="number" data-min="1" data-max="9999" data-title="内存插槽"><i class="fa fa-edit"></i></a></td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
            </form>
            <!-- /.box -->
        </div>
    </div>
{% endif %}
{% endif %}

    <div class="row">
        <div class="col-xs-12">
            <div class="box-footer">
                <button type="button" class="btn btn-default pull-right" onclick="$('.modaal-ajax-edit-asset').modaal('close');">关闭</button>&nbsp;
            </div>
        </div>
    </div>

<script>
    function formatData (ele) {
        let formatObj = {}
        let array = $(ele).serializeArray()
        $(array).each(function () {
            formatObj[this.name] = this.value
        })
        return formatObj
    }

    function deleteConfirm(id,url,ele){
        bootbox.confirm({
            size: "small",
            message: "是否删除该记录？",
            buttons: {
                confirm: {
                    label: '确认',
                    className: 'btn-success'
                },
                cancel: {
                    label: '取消',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
                if(result==true){
                    $.ajax({
                        type: "DELETE",
                        url: url+id+'/',
                        success: function (result) {
                            $(ele).parent().parent().remove()
                            toastr.success("删除成功！")
                        },
                        error: function (msg) {
                            console.log(msg)
                            toastr.error("删除失败！")
                        }
                    })
                }
            }
        })
    }

    function removeNetworkRow(id,ele){
        {% if perms.assets.delete_networkcardassets %}
        deleteConfirm(id,'/api/network_card_assets/',ele)
        {% else %}
            $.alert({
                title: 'Tips',
                type: 'red',
                content: '抱歉！您没有删除的权限，如有问题请联系管理员！',
            });
        {% endif %}
    }

    function removeRamRow(id,ele){
        {% if perms.assets.delete_ramassets %}
        deleteConfirm(id,"/api/ram_assets/",ele)
        {% else %}
            $.alert({
                title: 'Tips',
                type: 'red',
                content: '抱歉！您没有删除的权限，如有问题请联系管理员！',
            });
        {% endif %}
    }

    var mainInfoFields = ['hostname','cpu_model','kernel','system']
    var networkFields = ['network_card_model','network_card_mtu']
    var memFields = ['ram_volume','ram_brand']

    var networkPks = []
    {% for nk in asset.network_card_assets.all %}
        networkPks.push({{ nk.id }})
    {% endfor %}

    var memPks = []
    {% for ram in asset.ram_assets.all %}
        memPks.push({{ ram.id }})
    {% endfor %}

    function infoUpdate(params, url){
        var name = params.name.replace(/(\d)+/,'')
        var value = $.trim(params.value)
        var data = {}
        data[name] = value
        data['id'] = params.pk
        var flag = false
        $.ajax({
            type: "PATCH",
            async: false,
            url: url+params.pk+'/',
            data: JSON.stringify(data),  //传入组装的参数
            contentType: "application/json", //必须写在上面，否则序列化失败。
            dataType: 'json',
            success: function (result) {
                $('td>#'+params.name+'').parent().find('span').text(value)
            },
            error: function (msg) {
                if(msg.responseJSON.hasOwnProperty('non_field_errors')){
                    flag=true
                }
                console.log(msg)
            }
        })
        var d = new $.Deferred()
        if(flag == true) {
            return d.reject('输入值已经存在，请重新填写！'); //通过延迟对象返回错误
        }
    }

    var editableSetting = {
        showbuttons: 'bottom',
        icon: '<i class="fa fa-edit"></i>',
        icononly: true,
        validate: function (value) {
            let max = $(this).attr('data-length')
            if ($.trim(value).length>max) {
                return '输入长度不能超过'+max+'个字符串!'
            }
        },
    }

    function editableInit(field, setting){
        $('.'+field).editable(setting)
    }

    function numberValidator(value){
        value = $.trim(value)
        if ($.trim(value).length==0) {
            return '输入值不能为空!'
        }
        if(value.startsWith('0')){ return '请输入1到9999之间的正整数!' }
        if(value.includes('e')){ return '请输入1到9999之间的正整数!' }
    }

    function uniqueValidator(value){
        let max = $(this).attr('data-length')
        if ($.trim(value).length==0) {
            return '输入值不能为空!'
        }
        if ($.trim(value).length>max) {
            return '输入长度不能超过'+max+'个字符串!'
        }
    }

    function importNetwork(pks){
        let networkUpdatefunc = _.partial(infoUpdate, _, "/api/network_card_assets/")
        for(pk of pks){
            for(field of networkFields){
                editableInit(field, $.extend({
                    pk:pk,
                    url: networkUpdatefunc,
                },editableSetting))
            }
            for(field of ['network_card_mac','network_card_name']){
                $('.'+field).editable({
                    pk: pk,
                    showbuttons: 'bottom',
                    icon: '<i class="fa fa-edit"></i>',
                    icononly: true,
                    url: networkUpdatefunc,
                    validate: _.partial(uniqueValidator,_)
                })
            }
            $('.network_card_ip').editable({
                pk: pk,
                showbuttons: 'bottom',
                icon: '<i class="fa fa-edit"></i>',
                icononly: true,
                url: networkUpdatefunc,
                validate: function (value) {
                    if (!/^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/.test($.trim(value))) {
                            return '请输入正确的IP地址!'
                        }
                },
            })
            var options = {"0": "不正常", "1": "正常"}
            $('.network_card_status').editable({
                pk: pk,
                showbuttons: 'bottom',
                icon: '<i class="fa fa-edit"></i>',
                icononly: true,
                url: function(params){
                    var name = params.name.replace(/(\d)+/,'')
                    var value = $.trim(params.value)
                    var data = {}
                    data[name] = value
                    data['id'] = params.pk
                    $.ajax({
                        type: "PATCH",
                        async: false,
                        url: '/api/network_card_assets/'+params.pk+'/',
                        data: JSON.stringify(data),  //传入组装的参数
                        contentType: "application/json", //必须写在上面，否则序列化失败。
                        dataType: 'json',
                        success: function (result) {
                            $('td>#'+params.name+'').parent().find('span').text(options[value])
                        },
                        error: function (msg) {
                            document.location.reload()
                        }
                    })
                },
                source: options
            })
        }
    }

    function importRam(pks){
        let memUpdatefunc = _.partial(infoUpdate, _, "/api/ram_assets/")
        for(pk of pks){
            for(field of memFields){
                editableInit(field, $.extend({
                    pk:pk,
                    url: memUpdatefunc,
                },editableSetting))
            }
            $('.ram_serial').editable({
                pk: pk,
                showbuttons: 'bottom',
                icon: '<i class="fa fa-edit"></i>',
                icononly: true,
                url: memUpdatefunc,
                validate: _.partial(uniqueValidator,_)
            })
            $('.ram_slot').editable({
                pk: pk,
                showbuttons: 'bottom',
                icon: '<i class="fa fa-edit"></i>',
                icononly: true,
                url: memUpdatefunc,
                validate: _.partial(numberValidator,_)
            })
        }
    }

    function addRamErrorMessage(errors) {
        $.each(errors, function(name, value){
            if(name == 'non_field_errors'){
                $('#add_ram_slot').after('<span class="help-block">该内存插槽已经存在!</span>')
                $('#add_ram_slot').parent().parent().addClass('has-error')
            } else {
                $.each(value, function(i, v){
                    $('#add_'+name).after('<span class="help-block">'+v+'</span>')
                })
                $('#add_'+name).parent().parent().addClass('has-error')
            }
        })
    }

    function cleanErrors(){
        $('.has-error').removeClass('has-error')
        $('.help-block').remove()
    }

    function addRamRow(data){
        return '<tr><td><button type="button" class="btn btn-xs" onclick="removeRamRow('+data.id+',this);"><i class="glyphicon glyphicon-minus"></i></button></td>\n' +
            '<td><span>'+data.ram_serial+'</span><a id="ram_serial'+data.id+'" class="ram_serial" data-value="'+data.ram_serial+'" name="ram_serial" data-length="100" data-pk="'+data.id+'" data-type="textarea" data-title="内存序列号"><i class="fa fa-edit"></i></a></td>\n' +
            '<td><span>'+data.ram_volume+'</span><a id="ram_volume'+data.id+'" class="ram_volume" data-value="'+data.ram_volume+'" name="ram_volume" data-length="100" data-pk="'+data.id+'" data-type="textarea" data-title="内存容量"><i class="fa fa-edit"></i></a></td>\n' +
            '<td><span>'+data.ram_brand+'</span><a id="ram_brand'+data.id+'" class="ram_brand" data-value="'+data.ram_brand+'" name="ram_brand" data-length="100" data-pk="'+data.id+'" data-type="textarea" data-title="内存生产商"><i class="fa fa-edit"></i></a></td>\n' +
            '<td><span>'+data.ram_slot+'</span><a id="ram_slot'+data.id+'" class="ram_slot" data-value="'+data.ram_slot+'" name="ram_slot" data-pk="'+data.id+'" data-type="number" data-min="1" data-max="9999" data-title="内存插槽"><i class="fa fa-edit"></i></a></td></tr>'
    }

    function addRam(id){
        var addmsg = '<div class="row">\n' +
            '    <form class="form-horizontal" id="addRamForm">\n' +
            '        <input id="add_asset" name="asset" style="display: none;" value="'+id+'">\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_ram_serial" class="col-sm-3 control-label">内存序列号<span class="text-red">*</span></label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <textarea class="form-control" name="ram_serial" id="add_ram_serial"></textarea>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_ram_volume" class="col-sm-3 control-label">内存容量</label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <input type="text" class="form-control" name="ram_volume" id="add_ram_volume">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_ram_brand" class="col-sm-3 control-label">内存生产商</label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <input type="text" class="form-control" name="ram_brand" id="add_ram_brand">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_ram_slot" class="col-sm-3 control-label">内存插槽<span class="text-red">*</span></label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <input type="number" class="form-control" name="ram_slot" id="add_ram_slot" min="1" max="9999" oninput="if(this.value==\'0\'){this.value=\'\';}else{this.value=this.value.replace(/[^0-9]/g,\'\')};if(this.value.length>4){this.value=this.value.slice(0,4)}">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '    </form>\n' +
            '</div>'
        bootbox.dialog({
            title: '新增内存信息',
            message: addmsg,
            buttons: {
                ok: {
                    label: '确认',
                    className: 'btn-primary',
                    callback: function(){
                        cleanErrors()
                        var flag = true
                        var ramForm = formatData("#addRamForm")
                        if ($.trim(ramForm.ram_serial).length==0) {
                            $('#add_ram_serial').after('<span class="help-block">该字段不能为空。</span>')
                            $('#add_ram_serial').parent().parent().addClass('has-error')
                            toastr.error("请修改错误消息！")
                            return false
                        }
                        if ($.trim(ramForm.ram_slot).length==0) {
                            $('#add_ram_slot').after('<span class="help-block">该字段不能为空。</span>')
                            $('#add_ram_slot').parent().parent().addClass('has-error')
                            toastr.error("请修改错误消息！")
                            return false
                        }
                        $.ajax({
                            type: "POST",
                            url: '/api/ram_assets/',
                            async: false,
                            data: JSON.stringify(ramForm),  //传入组装的参数
                            contentType: "application/json", //必须写在上面，否则序列化失败。
                            dataType: 'json',
                            success: function (result) {
                                $('#ramInfo').append(addRamRow(result))
                                importRam([result.id])
                                toastr.success("新增成功！")
                            },
                            error: function (msg) {
                                flag = false
                                addRamErrorMessage(msg.responseJSON)
                                toastr.error("请修改错误消息！")
                            }
                        });
                        return flag
                    }
                },
                cancel: {
                    label: '关闭',
                    className: 'btn-danger',
                },
            }
        })
    }

    function addNetworkErrorMessage(errors) {
        $.each(errors, function(name, value){
            if(name == 'non_field_errors'){
                $('#add_network_card_mac').after('<span class="help-block">该MAC地址已经存在!</span>')
                $('#add_network_card_mac').parent().parent().addClass('has-error')
            } else {
                $.each(value, function(i, v){
                    $('#add_'+name).after('<span class="help-block">'+v+'</span>')
                })
                $('#add_'+name).parent().parent().addClass('has-error')
            }
        })
    }

    function addNetworkRow(data){
        html='<tr><td><button type="button" class="btn btn-xs" onclick="removeNetworkRow('+data.id+',this);"><i class="glyphicon glyphicon-minus"></i></button></td>\n' +
        '<td><span>'+data.network_card_name+'</span><a id="network_card_name'+data.id+'" class="network_card_name" name="network_card_name" data-length="20"  data-value="'+data.network_card_name+'" data-pk="'+data.id+'" data-type="text" data-title="网卡名称"><i class="fa fa-edit"></i></a></td>\n' +
        '<td><span>'+data.network_card_mac+'</span><a id="network_card_mac'+data.id+'" class="network_card_mac" name="network_card_mac" data-length="64"  data-value="'+data.network_card_mac+'" data-pk="'+data.id+'" data-type="textarea" data-title="MAC地址"><i class="fa fa-edit"></i></a></td>\n' +
        '<td><span>'+data.network_card_ip+'</span><a id="network_card_ip'+data.id+'" class="network_card_ip" name="network_card_ip" data-length="16"  data-value="'+data.network_card_ip+'" data-pk="'+data.id+'" data-type="text" data-title="IP地址"><i class="fa fa-edit"></i></a></td>\n' +
        '<td><span>'+data.network_card_model+'</span><a id="network_card_model'+data.id+'" class="network_card_model" name="network_card_model"  data-value="'+data.network_card_model+'" data-length="50" data-pk="'+data.id+'" data-type="textarea" data-title="网卡类型"><i class="fa fa-edit"></i></a></td>\n' +
        '<td><span>'+data.network_card_mtu+'</span><a id="network_card_mtu'+data.id+'" class="network_card_mtu" name="network_card_mtu"  data-value="'+data.network_card_mtu+'" data-length="50" data-pk="'+data.id+'" data-type="textarea" data-title="MTU"><i class="fa fa-edit"></i></a></td><td>\n'
        if(data.network_card_status==1){
            html += '<span>正常</span>\n'
        }else{
            html += '<span>不正常</span>\n'
        }
        html += '<a id="network_card_status'+data.id+'" class="network_card_status" name="network_card_status"  data-value="'+data.network_card_status+'" data-pk="'+data.id+'" data-type="select" data-title="网卡状态"><i class="fa fa-edit"></i></a></td></tr>'
        return html
    }

    function addNetwork(id){
        var addmsg = '<div class="row">\n' +
            '    <form class="form-horizontal" id="addNetworkForm">\n' +
            '        <input id="add_asset" name="asset" style="display: none;" value="'+id+'">\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_network_card_name" class="col-sm-3 control-label">网卡名称<span class="text-red">*</span></label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <input type="text" class="form-control" name="network_card_name" id="add_network_card_name">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_network_card_mac" class="col-sm-3 control-label">MAC地址<span class="text-red">*</span></label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <input type="text" class="form-control" name="network_card_mac" id="add_network_card_mac">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_network_card_ip" class="col-sm-3 control-label">IP地址<span class="text-red">*</span></label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <input type="text" class="form-control" name="network_card_ip" id="add_network_card_ip">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_network_card_model" class="col-sm-3 control-label">网卡类型</label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <input type="text" class="form-control" name="network_card_model" id="add_network_card_model">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_network_card_mtu" class="col-sm-3 control-label">MTU</label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <input type="text" class="form-control" name="network_card_mtu" id="add_network_card_mtu">\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="form-group">\n' +
            '            <label for="add_network_card_status" class="col-sm-3 control-label">网卡类型</label>\n' +
            '            <div class="col-sm-9">\n' +
            '                <select class="form-control" name="network_card_status" id="add_network_card_status">\n' +
            '                    <option value="1">正常</option>\n' +
            '                    <option value="0">不正常</option>\n' +
            '                </select>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '    </form>\n' +
            '</div>'
        bootbox.dialog({
            title: '新增网卡信息',
            message: addmsg,
            buttons: {
                ok: {
                    label: '确认',
                    className: 'btn-primary',
                    callback: function(){
                        cleanErrors()
                        var flag = true
                        var networkForm = formatData("#addNetworkForm")
                        if ($.trim(networkForm.network_card_name).length==0) {
                            $('#add_network_card_name').after('<span class="help-block">该字段不能为空。</span>')
                            $('#add_network_card_name').parent().parent().addClass('has-error')
                            toastr.error("请修改错误消息！")
                            return false
                        }
                        if ($.trim(networkForm.network_card_ip).length==0) {
                            $('#add_network_card_ip').after('<span class="help-block">该字段不能为空。</span>')
                            $('#add_network_card_ip').parent().parent().addClass('has-error')
                            toastr.error("请修改错误消息！")
                            return false
                        }
                        if ($.trim(networkForm.network_card_mac).length==0) {
                            $('#add_network_card_mac').after('<span class="help-block">该字段不能为空。</span>')
                            $('#add_network_card_mac').parent().parent().addClass('has-error')
                            toastr.error("请修改错误消息！")
                            return false
                        }
                        if (!/^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/.test($.trim(networkForm.network_card_ip))) {
                            $('#add_network_card_ip').after('<span class="help-block">请输入正确格式的IP地址。</span>')
                            $('#add_network_card_ip').parent().parent().addClass('has-error')
                            toastr.error("请修改错误消息！")
                            return false
                        }
                        $.ajax({
                            type: "POST",
                            url: '/api/network_card_assets/',
                            async: false,
                            data: JSON.stringify(networkForm),  //传入组装的参数
                            contentType: "application/json", //必须写在上面，否则序列化失败。
                            dataType: 'json',
                            success: function (result) {
                                $('#networkInfo').append(addNetworkRow(result))
                                importNetwork([result.id])
                                toastr.success("新增成功！")
                            },
                            error: function (msg) {
                                console.log(msg)
                                flag = false
                                addNetworkErrorMessage(msg.responseJSON)
                                toastr.error("请修改错误消息！")
                            }
                        });
                        return flag
                    }
                },
                cancel: {
                    label: '关闭',
                    className: 'btn-danger',
                },
            }
        })
        $('#add_network_card_ip').inputmask({alias:"ip"})
    }

    $(function(){
        let mainUpdatefunc = _.partial(infoUpdate, _, "/api/server_assets/")
        for(field of mainInfoFields){
            editableInit(field, $.extend({
                url: mainUpdatefunc,
                },editableSetting))
        }

        $('.disk_total').editable({
            showbuttons: 'bottom',
            emptytext: 0,
            url: mainUpdatefunc,
            validate: function (value) {
                let max = $(this).attr('data-length')
                if ($.trim(value).length>max) {
                    return '输入长度不能超过'+max+'个字符串!'
                }
            },
        })

        $('.ram_total').editable({
            showbuttons: 'bottom',
            emptytext: 0,
            url: mainUpdatefunc,
            validate: _.partial(numberValidator,_)
        })

        for(field of ['cpu_number','vcpu_number']){
            editableInit(field, $.extend({
                url: mainUpdatefunc,
            },editableSetting,{validate: _.partial(numberValidator,_)}))
        }

        importNetwork(networkPks)

        importRam(memPks)
    })
</script>